<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <input type="text" autocomplete="off" v-model="query" 
            @keyup.enter="searchMusic">
            <button @click="searchMusic">
                查找
            </button>
        </div>
        <audio ref='aduio' :src="musicUrl" controls autoplay loop ></audio>
        <ul v-for="item in musicList">
            <li>
                <a herf="javascript:;" @click="playMusic(item.id)">
                    <b>{{item.name}}</b>
                </a>
            </li>
        </ul>
      
        <div>
            <dl v-for="item in hotComments">
                <dd>
                <b>{{item.user.nickname}}</b>
                <br>
                <img :src="item.user.avatarUrl" width="100px" alt="hot comments 's image">
                <br>
                <span>{{item.content}}</span>
                </dd>
            </dl>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

var app=new Vue({
    el:"#app",
    data:{
        query:"",
        musicList:[],
        musicUrl:"",
        hotComments:[]
    },
    methods:{
        searchMusic:function(){
            var that=this;
            axios.get("https://autumnfish.cn/search?keywords="+this.query).then(
                function(response){
                  //  console.log(response);
                    that.musicList=response.data.result.songs;
                },function(err){

                })
        },
        playMusic:function(musicId){
         //    console.log(musicId);
         //   console.log(response.data.result.songs);
                var that=this;
            axios.get("https://autumnfish.cn/song/url?id="+musicId)
            .then(function(response){
              //  console.log(response);
             //   console.log(response.data.data[0].url);
                that.musicUrl=response.data.data[0].url;
            },function(err){}
            ) 
            /*
           axios.get("https://autumnfish.cn/song/detail?ids"+musicId)
            .then(function(response){
                console.log(response);
            },function(err){})
            */
            axios.get("https:autumnfish.cn/comment/hot?type=0&id="+musicId)
            .then(function(response){
               // console.log(response);
               console.log(response.data.hotComments);
               that.hotComments=response.data.hotComments;
            },function(err){})
        }
    }
})        
    </script>
</body>
</html>